<template>
  <div style="background-color: #ffffff; padding: 10px">
    <el-row>
      <el-col :span="6">
        <div style="width: 52px; height: 52px">
          <el-image src="https://gcdnb.pbrd.co/images/Bo1Sm8Zt5OyB.gif?o=1" alt="cheems.gif" @click="menu.goHome">
            <template #error>
              <div>
                <el-icon><icon-picture /></el-icon>
              </div>
            </template>
          </el-image>
        </div>
        <!-- <span style="font-size: 32px">🔨</span> -->
      </el-col>
      <el-col :span="12">
        <div>
          <el-input v-model="searchWord" size="large" placeholder="搜索资源" :prefix-icon="Search" @keyup.enter="doSearch" />
        </div>
      </el-col>
      <el-col :span="5"> </el-col>

      <el-col :span="1">
        <el-dropdown size="large" trigger="click">
          <span @click="menu.jump">
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <!-- <el-dropdown-item>|
              </el-dropdown-item> -->

              <el-dropdown-item @click="menu.goManager">
                <span>配置中心</span>
              </el-dropdown-item>

              <el-dropdown-item divided>
                <span @click="menu.loginOut">登出</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { onMounted, ref, watchEffect } from 'vue'
import { useRouter } from 'vue-router'
import store from '@/store'

import { Search } from '@element-plus/icons-vue'
import { Picture as IconPicture } from '@element-plus/icons-vue'

import { searchResource } from '@/api/resource.js'

export default {
  name: 'hd',
  setup() {
    const router = useRouter()
    const menu = {}

    menu.loginOut = () => {
      console.log('退出登录')
    }

    menu.goManager = () => {
      router.push('/u')
    }

    menu.goHome = () => {
      router.push('/')
    }

    menu.jump = () => {
      // store.state.user.token = 'sdfsdf'
      console.log('jump', store, store.state)
    }

    const searchWord = ref('')

    const doSearch = () => {
      if (searchWord.value === '') return
      router.push(`/search?word=${searchWord.value}&sort=time`)
    }

    watchEffect(() => {
      let curRoute = router.currentRoute.value
      let condition = curRoute.query
      if (curRoute.name === 'search' && condition['word']) {
        searchWord.value = condition['word']
      }
    })

    onMounted(() => {})

    return { menu, Search, searchWord, doSearch }
  }
}
</script>

<style scoped></style>
